<template>
	<div class="wrapper" v-if="wrapperShow">
		<swiper :options="swiperOption">
		   <swiper-slide v-for="item of list" :key="item.id">
			   <img :src="item.imgUrl" class="swiper-img">
		   </swiper-slide>
		   <div class="swiper-pagination"  slot="pagination"></div>
		</swiper>
	 </div>
</template>

<script>
export default {
	name: 'HomeSwiper',
	props:{
		list:Array
	},
	data () {
		return {
			swiperOption: {
				pagination:'.swiper-pagination',
				loop:true,
				paginationClickable :true
			}
		}
	},
	computed:{
		wrapperShow(){
			return this.list.length
		}
	}
}
</script>

<style lang="stylus" scoped>
	.wrapper >>> .swiper-pagination-bullet-active
		background-color:#fff
	.wrapper
		overflow hidden
		width 100%
		height 0
		padding-bottom 31%
		background-color #eee
		.swiper-img
			width 100%
</style>
